import data from './list-total.json'
import React from 'react';
import './yq.css'
let list = data.data.areaTree



class Yq extends React.Component {

  componentDidMount() {
    this.initPageData()
  }
  state = {
    allData: list,
    list: [],
    page: {
      lastPage: 0,
      page: 0,
      size: 10
    }
  }
  initPageData() {

    let page = this.state.page
    page.lastPage = Math.ceil(list.length / 10)
    let nowList = this.filterList(page.page)
    this.setState({
      page, list: nowList
    })
  }
  filterList(page) {
    
    let size = this.state.page.size
    return this.state.allData.filter((item, index) => {
      return index >= page * size && index < (page + 1) * size
    })
  }
  changePage = (index)=>{
    let page = this.state.page
    page.page = index
    let nowList = this.filterList(index)
    this.setState({
      list: nowList,
      page
    })
  }
  render() {
    let lastpage = this.state.page.lastPage

    let pageJsx = []
    for (let index = 0; index < lastpage; index++) {
      let cls = index === this.state.page.page ? 'checkPage' : ''

      pageJsx.push(
        <button onClick={()=>{
          this.changePage(index)
        }} 
        className={cls}>
          {index + 1}
        </button>
      )
    }


    return (
      <div>
        <table >
          <tbody>
            <tr>
              <th>地区名</th>
              <th>确诊(人数)</th>
              <th>康复(人数)</th>
              <th>死亡(人数)</th>
              <th>怀疑(人数)</th>
              <th>操作</th>
            </tr>
            {
              this.state.list.map((item, index) => (
                <tr key={index}>
                  <td>{item.name}</td>
                  <td>{item.today.confirm || 0}</td>
                  <td>{item.today.heal || 0}</td>
                  <td>{item.today.dead || 0}</td>
                  <td>{item.today.sypect || 0}</td>
                  <td>
                    <button>删除</button>
                  </td>
                </tr>
              ))
            }
          </tbody>
        </table>

        <div className="pageBox" >
          {pageJsx}
        </div>

      </div>
    )
  }
}


export default Yq